<template>
    <div class="search">
        <div class="top">
            <div>
                <el-icon size="20px">
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetFn">重置</el-button>
                <el-button type="primary" @click="searchFn">查询搜索</el-button>
            </div>
        </div>
        <div class="bottom">
            <el-form-item lable-width="120px" label="账号姓名">
                <el-input v-model="userStore.search.keyword" size="default" />
            </el-form-item>
        </div>
    </div>

</template>

<script setup lang="ts">
import {
    Search
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user';
import { ref } from 'vue';

const userStore = useUserStore()

const searchFn = () => {
    userStore.listFn()
}
const resetFn = () => {
    userStore.search.keyword = ""
}

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}


</script>

<style lang="less" scoped>
.search {
    padding: 10px;
    box-shadow: 0px 0px 10px #f2f2f2;
    margin-top: 40px;

    .top {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .bottom {
        margin-top: 20px;
        width: 300px;
    }
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>